import { defineComponent } from 'vue'
import { ButtonProps } from '@/types'
import { EIcon } from '@/components/icon'
import './button.scss'

export default defineComponent({
  name: 'EButton',
  props: ButtonProps,
  setup(props:ButtonProps) {
    const onClick = (e: MouseEvent) => {
      if (props.showLoading) {
        return
      }
      props.onClick?.(e)
    }
    return {
      onClick
    }
  },
  render() {
    const { $slots, disabled, icon, type, round, circle, onClick, loading } = this
    return (
      <button
        class={`e-button e-button--${type || 'default'} ${round ? 'e-button--round' : ''} ${circle ? 'e-button--circle' : ''}`}
        disabled={disabled}
        onClick={onClick}
      >
        {
          icon && !loading
            ? <EIcon style={$slots.default ? { marginRight: '10px' } : {}} type={icon}></EIcon>
            : ''
        }
        <span>{$slots.default?.()}</span>
      </button>
    )
  }
})
